import { DeleteOutlined, DislikeFilled, LikeFilled } from '@ant-design/icons';
import { Input, Popconfirm } from 'antd';
import React from 'react';
import './index.less';
const Comment: React.FC = (props) => {
  const { TextArea } = Input;
  const { commentList, setCommentList, highlighterRef } = props;

  //评价里的意见框
  const changeIdea = (value: string, index: number) => {
    setCommentList((prevList) => {
      const updatedList = [...prevList];
      updatedList[index] = { ...updatedList[index], idea: value };
      return updatedList;
    });
  };

  //删除评价
  const handleDel = (value: string, index: any) => {
    highlighterRef.current?.deleteRange(value.id); //删除选中的文本
    setCommentList((prevList) => {
      const updatedList = [...prevList];
      updatedList.splice(index, 1);
      return updatedList;
    });
  };

  return (
    <div className="evaluationDoc-right">
      {commentList.filter((item) => item.type === 1).length > 0 && (
        <div className="commentTypeBox">
          <span className="commentType-hd">
            <LikeFilled style={{ color: '#60D9A4' }} />
          </span>
          <span className="commentType-bd">赞</span>
        </div>
      )}
      <div className="commentListBox">
        {commentList.map((item: any, index: number) => {
          if (item.type === 1) {
            return (
              <div className="commentList" key={item.id}>
                <div className="commentList-hd">
                  <div className="commentSection">{item.content}</div>
                  <div className="commentIdea">
                    <TextArea
                      bordered={false}
                      value={item.idea}
                      style={{ backgroundColor: '#F0F0F3', fontSize: '12px' }}
                      onChange={(e) => changeIdea(e.target.value, index)}
                      placeholder={`请简要写出点${
                        item.type === 1 ? '赞' : '踩'
                      }原因，AI会根据您的描述快速学习，变得更加懂你`}
                      autoSize={{ minRows: 3, maxRows: 5 }}
                    />
                  </div>
                </div>
                <div className="commentList-bd">
                  <Popconfirm
                    title="提示"
                    description="是否删除该条赞?"
                    onConfirm={() => {
                      handleDel(item, index);
                    }}
                    okText="Yes"
                    cancelText="No"
                  >
                    <DeleteOutlined style={{ color: '#000000' }} />
                  </Popconfirm>
                </div>
              </div>
            );
          } else {
            return null;
          }
        })}
      </div>
      {commentList.filter((item) => item.type === 1).length > 0 &&
        commentList.filter((item) => item.type === 2).length > 0 && <div className="divider"></div>}
      {commentList.filter((item) => item.type === 2).length > 0 && (
        <div className="commentTypeBox">
          <span className="commentType-hd">
            <DislikeFilled style={{ color: '#F57070' }} />
          </span>
          <span className="commentType-bd">踩</span>
        </div>
      )}
      <div className="commentListBox">
        {commentList.map((item: any, index: number) => {
          if (item.type === 2) {
            return (
              <div className="commentList" key={item.id}>
                <div className="commentList-hd">
                  <div className="commentSection">{item.content}</div>
                  <div className="commentIdea">
                    <TextArea
                      bordered={false}
                      value={item.idea}
                      style={{ backgroundColor: '#F0F0F3', fontSize: '12px' }}
                      onChange={(e) => changeIdea(e.target.value, index)}
                      placeholder={`请简要写出点${
                        item.type === 1 ? '赞' : '踩'
                      }原因，AI会根据您的描述快速学习，变得更加懂你`}
                      autoSize={{ minRows: 3, maxRows: 5 }}
                    />
                  </div>
                </div>
                <div className="commentList-bd">
                  <Popconfirm
                    title="提示"
                    description="是否删除该条踩?"
                    onConfirm={() => {
                      handleDel(item, index);
                    }}
                    okText="Yes"
                    cancelText="No"
                  >
                    <DeleteOutlined style={{ color: '#000000' }} />
                  </Popconfirm>
                </div>
              </div>
            );
          } else {
            return null;
          }
        })}
      </div>
    </div>
  );
};

export default Comment;
